<template>
  <div class="app-container">
    <el-tabs v-model="currentTabName" @tab-click="handleClick">
      <el-tab-pane label="行为日志" name="BehaviorLog">
        <BehaviorLog v-if="currentTabName === 'BehaviorLog'" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(permissionRoles.behavior_config)" label="日志配置" name="BehaviorLogConfig">
        <BehaviorLogConfig v-if="currentTabName === 'BehaviorLogConfig'" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(permissionRoles.reason_config)" label="原因配置" name="ReasonConfig">
        <ReasonConfig v-if="currentTabName === 'ReasonConfig'" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(permissionRoles.behavior_export)" label="筛选导出" name="Export">
        <Export v-if="currentTabName === 'Export'" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(permissionRoles.behavior_static)" label="日志统计" name="Static">
        <Static v-if="currentTabName === 'Static'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import BehaviorLog from './components/BehaviorLog'
import BehaviorLogConfig from './components/BehaviorLogConfig'
import ReasonConfig from './components/ReasonConfig'
import Export from './components/Export'
import Static from './components/Static'
import checkPermission from '@/utils/permission'

export default {
  name: 'Behavior',
  components: { BehaviorLog, BehaviorLogConfig, ReasonConfig, Export, Static },
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      currentTabName: 'BehaviorLog'
    }
  },
  methods: {
    checkPermission,
    handleClick() {}
  }
}
</script>
